<template>
  <div class="juzheng">
    <div class="juzheng-left">
      <ul>
        <li v-for="(item, index) in conferenceList" :key="item.id" :class="isActive == index ? 'active' : ''" @click="clickisActive(index)">
          {{item.name}}
        </li>
      </ul>
    </div>
    <div class="juzheng-rigth">
      <div class="juzheng-rigth-display">
        <ul>
          <li v-for="data in displayList" :key="data.id" class="juzheng-rigth-display-box">
            <p class="juzheng-rigth-display-title">
              <span>{{data.title}}</span>
            </p>
            <div v-if="data.signal" class="juzheng-rigth-display-play">
              <div class="video" :id="'video_' + data.id"></div>
            </div>
            <div class="target juzheng-rigth-display-text" :id="data.id">
              <div v-if="!data.signal">拖拽信号源到此处</div>
            </div>

          </li>
        </ul>
      </div>
      <div class="juzheng-rigth-signal">

        <ul>
          <li class="juzheng-rigth-signal-box" v-for="(item, index) in conferenceList" :key="item.id">
            <div class="juzheng-rigth-signal-meetName" :class="isActiveTwo == index ? 'active' : ''" @click="clickisActiveTwo(index)">
              <p>
                {{item.name}}
              </p>
            </div>
            <div class="juzheng-rigth-signal-list" v-if="isActiveTwo == index">
              <ol ref="right">
                <li class="juzheng-rigth-signal-list-li" :id="'a' + (index * 3 + 1)">
                  <div>
                    <img src="@/assets/img/xinhaoyuan.jpg" alt="">
                  </div>
                  <p>摄像头信号源一</p>
                </li>
                <li class="juzheng-rigth-signal-list-li" :id="'a' + (index * 3 + 2)">
                  <div>
                    <img src="@/assets/img/xinhaoyuan.jpg" alt="">
                  </div>
                  <p>摄像头信号源二</p>
                </li>
                <li class="juzheng-rigth-signal-list-li" :id="'a' + (index * 3 + 3)">
                  <div>
                    <img src="@/assets/img/xinhaoyuan.jpg" alt="">
                  </div>
                  <p>摄像头信号源三</p>
                </li>
              </ol>
            </div>
          </li>
        </ul>

      </div>
    </div>
  </div>
</template>
<script>
import Sortable from 'sortablejs'
import videojs from 'video.js'
import 'videojs-contrib-hls'

export default {
  name: 'matrixCop',
  data () {
    return {
      conferenceList: [{
        name: '会议室一',
        id: 1
      },
      {
        name: '会议室二',
        id: 2
      },
      {
        name: '会议室三',
        id: 3
      },
      {
        name: '会议室四',
        id: 4
      },
      {
        name: '会议室五',
        id: 5
      },
      {
        name: '会议室六',
        id: 6
      }],
      pageInfo: {
        name: '',
        status: -1,
        pageStart: 1,
        pageSize: 6
      },
      isActive: 0,
      isActiveTwo: 0,
      playList: [
        {
          id: 'b1',
          title: '中间LED大屏',
          signal: ''
        },
        {
          id: 'b2',
          title: '左侧电视机',
          signal: ''
        },
        {
          id: 'b3',
          title: '右侧电视机',
          signal: ''
        },
        {
          id: 'b4',
          title: '中间LED大屏',
          signal: ''
        },
        {
          id: 'b5',
          title: '左侧电视机',
          signal: ''
        },
        {
          id: 'b6',
          title: '右侧电视机',
          signal: ''
        },
        {
          id: 'b7',
          title: '中间LED大屏',
          signal: ''
        },
        {
          id: 'b8',
          title: '左侧电视机',
          signal: ''
        },
        {
          id: 'b9',
          title: '右侧电视机',
          signal: ''
        },
        {
          id: 'b10',
          title: '中间LED大屏',
          signal: ''
        },
        {
          id: 'b11',
          title: '左侧电视机',
          signal: ''
        },
        {
          id: 'b12',
          title: '右侧电视机',
          signal: ''
        },
        {
          id: 'b13',
          title: '中间LED大屏',
          signal: ''
        },
        {
          id: 'b14',
          title: '左侧电视机',
          signal: ''
        },
        {
          id: 'b15',
          title: '右侧电视机',
          signal: ''
        },
        {
          id: 'b16',
          title: '中间LED大屏',
          signal: ''
        },
        {
          id: 'b17',
          title: '左侧电视机',
          signal: ''
        },
        {
          id: 'b18',
          title: '右侧电视机',
          signal: ''
        }
      ],
      displayList: [],
      videoInfo: {
        container: '#video_b1', // 容器的ID或className
        variable: 'player', // 播放函数名称
        autoplay: true,
        live: true,
        video: ''// 视频地址-rtmp的地址就可以
      },

      signalList: [],
      nowIndex: 0
    }
  },
  created () {
    this.query()
  },
  methods: {
    // 播放视频（全部播放）
    getOneVideo () {
      this.displayList.forEach((item, index) => {
        this.videoInfo.container = '#video_' + item.id
        this.videoInfo.video = item.signal
        // this.videoInfo.video = item.videoUrl
        new ckplayer(this.videoInfo)
      })
    },
    // 播放视频（单独播放）
    getOneVideoOne (id) {
      this.displayList.forEach((item, index) => {
        if (id != item.id) {
          return
        }
        this.videoInfo.container = '#video_' + item.id
        this.videoInfo.video = item.signal
        // this.videoInfo.video = item.videoUrl
        new ckplayer(this.videoInfo)
      })
    },
    clickisActive (index) {
      this.isActive = index
      this.displayList = this.playList.slice(index * 3, index * 3 + 3)
      this.$nextTick(() => {
        this.getOneVideo()
        this.reset()
        // this.clickisActiveTwo(0)
      })
    },
    clickisActiveTwo (index) {
      // this.nowIndex = index
      this.isActiveTwo = index
      this.$nextTick(() => {
        this.resetTwo()
      })
    },
    query () {
      // this.reset();
      this.clickisActive(0)
      this.clickisActiveTwo(0)

      // 给信号源添加信号
      for (let j = 0; j < 18; j++) {
        let num = j + 1
        if (num == 18) {
          num = 1
        }
        this.signalList.push({
          id: 'a' + (j + 1),
          video: `http://ivi.bupt.edu.cn/hls/cctv${num}hd.m3u8`
        })
      }
    },
    // 拖拽（视频）
    reset () {
      console.log('执行了')
      const this_ = this
      const arr2 = document.querySelectorAll('.target')
      arr2.forEach((item, index) => {
        Sortable.create(item, {
          group: {
            name: 'words',
            // pull: 'clone',
            put: true,
            pull: false
          },
          put: false,
          animation: 150 // 动画参数.
        })
      })
    },
    // 拖拽（信号源）
    resetTwo () {
      console.log('执行了')
      const this_ = this

      Sortable.create(this.$refs.right[0], {
        group: {
          name: 'words',
          pull: 'clone',
          put: true
        },
        sort: false,
        animation: 150, // 动画参数
        onChoose: function (evt) {

        },
        onEnd: function (evt) {
          console.log(evt.clone.id)// 被拖拽的
          console.log(evt.to.id)// 拖拽的目的地
          const arr2 = document.querySelectorAll('.target')
          // 删除拖拽后的节点
          arr2.forEach((item, index) => {
            const arrChildren = item.querySelectorAll('.juzheng-rigth-signal-list-li')
            arrChildren.forEach(itemChildren => {
              item.removeChild(itemChildren)
            })
          })

          if (evt.to.id) {
            // 播放器
            this_.displayList.forEach((item, index) => {
              console.log('ok')
              if (item.id == evt.to.id) {
                // 信号源头
                const objItem = this_.signalList.filter(item => {
                  return item.id == evt.clone.id
                })

                this_.displayList[index].signal = objItem[0].video
                this_.$nextTick(() => {
                  this_.getOneVideoOne(evt.to.id)
                })

                console.log(objItem, index, evt.clone.id)
              }
            })
          }
        }
      })
    }

  }
}

</script>
<style scoped>
  *{
    padding: 0;
    margin: 0;
    font-size: 13px;
  }
  ul,ol{
    list-style: none;
  }

  .juzheng {
    width: 100%;
    height: 500px;
    margin: 20px auto;
    display: flex;
  }

  .juzheng-left{
    width: 200px;
    height: 100%;
    overflow: auto;
    padding-right: 20px;
  }

  .juzheng-left li{
    width: 100%;
    height: 40px;
    padding-left: 20px;
    line-height: 40px;
    background: #b9d9ff;
    cursor: pointer;
  }
  .juzheng-left li.active{
    background: #2d8fff;
    color: white;
  }

  .juzheng-rigth{
    flex: 1;
    height: 100%;
    padding-left: 20px;
  }

  .juzheng-rigth-display{
    width: 100%;
    height: 240px;
  }

  .juzheng-rigth-display ul{
    display: flex;
  }
  .juzheng-rigth-display li{
    margin-right: 20px;
  }
  .juzheng-rigth-display li .juzheng-rigth-display-text{
    height: 200px;
    width: 330px;
    text-align: center;
    line-height: 200px;
    border: 1px solid #2d8fff;
    box-sizing: border-box;
    position: absolute;
    z-index: 6;
    overflow: hidden;
  }
  .juzheng-rigth-display li .juzheng-rigth-display-play{
    height: 200px;
    width: 330px;
    text-align: center;
    line-height: 200px;
    position: absolute;
    z-index: 6;
  }
  .juzheng-rigth-display-title{
    height: 40px;
    color: #2d8fff;
    font-size: 18px;
    display: flex;
    justify-content: space-between;
    align-content: center;
  }

  .juzheng-rigth-signal{
    margin-top: 20px;
    width: 100%;
    height: 140px;
  }
  .juzheng-rigth-signal ul{
    display: flex;
    overflow: hidden;
  }
  .juzheng-rigth-signal-meetName{
    cursor: pointer;
  }
  .juzheng-rigth-signal li .juzheng-rigth-signal-meetName.active{
    background: #2d8fff;
    color: white;
  }
  .juzheng-rigth-signal li .juzheng-rigth-signal-meetName{
    width: 50px;
    display: flex;
    justify-content: center;
    background: #b9d9ff;
  }
  .juzheng-rigth-signal-meetName p{
    height: 140px;
    letter-spacing: 2px;
    writing-mode: vertical-lr;
    text-orientation: upright;
    padding-top: 20px;
    padding-bottom: 20px;
  }

  .juzheng-rigth-signal li .juzheng-rigth-signal-list{
    background: #96c2f8;
    height: 100%;
  }
  .juzheng-rigth-signal-box{
    display: flex;
  }
  .juzheng-rigth-signal-list ol{
    padding-left: 10px;
    display: flex;
    height: 100%;
  }
  .juzheng-rigth-signal-list-li{
    margin-right: 10px;
    height: 100%;
  }
  .juzheng-rigth-signal-list-li div{
    height: 110px;
  }
  .juzheng-rigth-signal-list-li img{
    height: 110px;
    width: 180px;
    object-fit: cover;
  }
  .juzheng-rigth-signal-list-li p{
    height: 30px;
    color: white;
    font-size: 13px;
    line-height: 30px;
    text-align: center;
  }

  .juzheng-rigth-display-box{
    height: 200px;
    width: 330px;
    position: relative;
  }

  .juzheng-rigth-display-box .video{
    height: 100%;
    position: absolute;
    z-index: 6;
    top: 0;
    left: 0;
  }

</style>
